import React, {useState, useImperativeHandle, forwardRef} from 'react'
import {Button, message, Upload} from 'antd'
import type {RcFile} from 'antd/es/upload'
import {useModel} from 'umi'
import type {UploadFile} from 'antd/es/upload/interface'
import CustomTable from '@/components/Table'
import {getPublicDownloadUrl, uploadFileUrl} from '@/service/common/upload'
import {downloadImages} from './bulkDownload'

function AccessoryList(props: {data: any; status: boolean}, ref: any) {
	const {data, status} = props
	const {initialState} = useModel('@@initialState')
	const {fileName} = initialState || {}
	const newData = data.filter((v: any) => v !== undefined)
	const [fileList, setFileList] = useState<UploadFile[]>([])
	const [tableList, setTableList] = useState<any[]>([...newData])
	const uploadButton = <Button type="link">上传</Button>
	const beforeUpload = (file: RcFile) => {
		const isLt2M = file.size / 1024 / 1024 < 50
		if (!isLt2M) {
			message.error('文件大小不能大于50M')
		}
		return isLt2M
	}
	const onRemove = (info: any) => {
		message.success(`${info?.name}移除成功`)
	}

	const columns = [
		{
			title: '序号',
			dataIndex: 'warehouseCode',
			align: 'center',
			width: 60,
			defaultSortOrder: 'ascend',
			render(text: any, record: any, index: number) {
				return <span>{index + 1}</span>
			},
		},
		{
			title: '附件名称',
			dataIndex: 'name',
			align: 'center',
			width: 200,
		},
		{
			title: '附件示例',
			dataIndex: 'planUrlName',
			align: 'center',
			width: 140,
			render: (
				text: any,
				record: {planhref: string | URL | undefined},
			) => (
				<Button
					type="link"
					size="small"
					onClick={() => {
						window.open(record.planhref)
					}}>
					{text}
				</Button>
			),
		},
		{
			title: '上传文件',
			dataIndex: 'urlName',
			align: 'center',
			width: 150,
			render: (text: any, record: {href: string | URL | undefined}) => (
				<Button
					type="link"
					size="small"
					onClick={() => {
						window.open(record.href)
					}}>
					{text}
				</Button>
			),
		},
		{
			title: '操作',
			key: 'action',
			align: 'center',
			fixed: 'right',
			width: 190,
			render: (_: any, record: any) => (
				<div>
					<Button
						type="link"
						size="small"
						disabled={status}
						onClick={() => {
							window.open(record.planhref)
						}}>
						下载附件示例
					</Button>
					<Upload
						action={uploadFileUrl}
						listType="text"
						fileList={fileList}
						key="accessory"
						name={fileName}
						disabled={status}
						showUploadList={false}
						data={{
							modelName: 'accessory',
							targetAttr: 1,
						}}
						beforeUpload={beforeUpload}
						onChange={(info: any) => {
							setFileList(info?.fileList)
							if (info.file.status === 'done') {
								message.success('上传成功')
								getPublicDownloadUrl([
									info?.file?.response?.data?.id,
								]).then((result: any) => {
									if (result?.success) {
										const newList = tableList?.map(
											(item) => {
												if (
													item?.planAnnexId ===
													record?.planAnnexId
												) {
													return {
														...item,
														urlName:
															info?.file?.name,
														url: info?.file
															?.response?.data
															?.id,
														href: result?.data?.[0]
															?.url,
													}
												}
												return item
											},
										)
										setTableList(newList)
									}
								})
							}
							if (info.file.status === 'error') {
								message.error(info?.file?.response.msg)
							}
						}}
						onRemove={onRemove}>
						{uploadButton}
					</Upload>
				</div>
			),
		},
	]
	// 批量下载盘点附件示例文件
	const batchLoad = () => {
		downloadImages(tableList)
	}

	useImperativeHandle(ref, () => ({
		getData: () => tableList,
	}))

	return (
		<div>
			<Button
				disabled={status}
				style={{marginBottom: 20}}
				onClick={batchLoad}>
				批量下载
			</Button>
			<CustomTable
				kid="carPlateNo"
				columns={columns}
				callback={() => {}}
				loading={false}
				dataSource={tableList}
			/>
		</div>
	)
}

export default forwardRef(AccessoryList)
